<template>
    <div class="columnson">
      <div class="List">
        <!-- 图片区域 -->
        <div class="myimg" v-if="myimage != ''">
          <van-image
            id="myone"
            :src="'data:image/png;base64,' + myimage"
            :style="{
              width: width * 0.6 * num + 'px',
              height: height * 0.6 * num + 'px',
              marginLeft: loctionleft + 'px',
              marginTop: loctiontop + 'px',
            }"
          >
            <!--显示出全部库位点 -->
            <!-- <template v-if="show"> -->
              <span
                v-for="(item, index) in robot"
                @click="select(item.id)"
                :key="index"
                id="span"
                :class="[{ active: activeItem === list }]"
                :style="{
                  width: 25 * num + 'px',
                  height: 25 * num + 'px',
                  top:
                    (height - (item.y / 10.0 - newy * 100.0) / 5 - 1) *
                      0.6 *
                      num +
                    'px',
                  left: ((item.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                }"
                >{{ item.id }}</span
              >
            <!-- </template> -->
            <!--没有点击事件的库位点 -->
            <!-- <template v-if="!show">
              <span
                v-for="(item, index) in robot"
                :key="index"
                id="span"
                :class="[{ active: activeItem === list }]"
                :style="{
                  width: 25 * num + 'px',
                  height: 25 * num + 'px',
                  top:
                    (height - (item.y / 10.0 - newy * 100.0) / 5 - 1) *
                      0.6 *
                      num +
                    'px',
                  left: ((item.x / 10.0 - newx * 100) / 5) * 0.6 * num + 'px',
                }"
                >{{ item.id }}</span
              >
            </template> -->
          </van-image>
          <!--平移按钮 -->
          <van-button @click="right" class="right"
            ><van-icon name="arrow" size="44"
          /></van-button>
          <van-button @click="left" class="left"
            ><van-icon name="arrow-left" size="44"
          /></van-button>
          <van-button @click="top" class="top"
            ><van-icon name="arrow-up" size="44"
          /></van-button>
          <van-button @click="bottom" class="bottom"
            ><van-icon name="arrow-down" size="44"
          /></van-button>
          <!-- --------------------------------------------------------------按钮放大缩小区域 -->
          <div class="mybig">
            <van-button type="info" @click="big"
              ><i class="iconfont icon-sousuofangda" style="fontSize: 28px"></i
            ></van-button>
            <van-button type="info" @click="min"
              ><i class="iconfont icon-suoxiao" style="fontSize: 28px"></i
            ></van-button>
          </div>
        </div>
        <!-- ---------------------------------------------------------列列表属性内容 -->
        <div class="property">
          <!-- 删除库位按钮 -->
          <!-- <div class="mybutton">
            <van-button @click="change(list)">编辑列表</van-button>
          </div> -->
          <div class="zore">列属性</div>
          <div class="middle" v-if="!columnShow">
            <div class="one">
              <!-- <span>列ID:</span><span>{{ list.point_list_id }}</span> -->
            </div>
            <div class="three"><span>列包含库位列表:</span></div>
            <div class="twofour">
              <!--进行新增时显示的数据 -->
              <!-- <template v-if="show != ''"> -->
                <div v-for="(item, index) in seveRobot" :key="index" class="seat">
                  {{ item }}
                  <div class="button">
                    <van-icon
                      name="arrow-up"
                      size="28px"
                      @click="topDown(index)"
                      color="#fff"
                    />
                    <van-icon
                      name="arrow-down"
                      size="28px"
                      @click="bottomDown(index)"
                      color="#fff"
                    />
                    <van-icon
                      name="close"
                      size="28"
                      @click="remove(index)"
                      color="#fff"
                    />
                  </div>
                </div>
              <!-- </template> -->
  
              <!-------------------------------------------编辑的点击的那一项的数据 -->
              <template v-if="show == ''">
                <div
                  v-for="(item, index) in newList.point_id"
                  :key="index"
                  class="seat"
                >
                  {{ item }}
                  <div class="button">
                    <van-icon
                      name="arrow-up"
                      size="28px"
                      @click="ListDown(index)"
                      color="#fff"
                    />
                    <van-icon
                      name="arrow-down"
                      size="28px"
                      @click="Listbotton(index)"
                      color="#fff"
                    />
                    <van-icon
                      name="close"
                      size="28"
                      @click="cancel(index)"
                      color="#fff"
                    />
                  </div>
                </div>
              </template>
            </div>
            <!-- <div class="twofour" v-if="newList!=''">
              <div v-for="(item, index) in newList.point_id" :key="index">
                {{ item }}
                <div class="button">
                  <van-icon
                    name="arrow-up"
                    size="28px"
                    @click="topDown(index)"
                    color="#fff"
                  />
                  <van-icon
                    name="arrow-down"
                    size="28px"
                    @click="bottomDown(index)"
                    color="#fff"
                  />
                </div>
              </div>
            </div> -->
          </div>
          <div class="mybutton" v-if="show">
            <van-button @click="preserve">保存</van-button>
            <!-- <van-button @click="preserve">保存</van-button> -->
          </div>
          <div class="newList" v-if="newList != ''">
            <van-button @click="achieve" v-if="!show">完成</van-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  //导入获取库位点的接口
  import { gainApi } from "@/api/record";
  // 导入yaml格式进行获取到数据的转换
  import yaml from "js-yaml";
  //导入封装好的路线编辑数据接口
  import { geteditorsApi } from "@/api/editors";
  //导入封装好的列列表数据接口
  import {
    addparseApi,
    deteleparseApi,
    changedApi,
    parseApi,
  } from "@/api/location";
  export default {
    //接收父组件中传过来的值
    props: ["list", "show", "columnShow", "newList"],
    data() {
      return {
        activeItem: "", //选中高亮的类名
        myimage: "", //保存地图数据
        loctionleft: 0, //左边移动的距离
        loctiontop: 0, //上下移动的距离
        width: "", //图片宽度
        height: "", //图片高度
        newx: "", //圆点x坐标
        newy: "", //圆点y轴坐标
        inif: {
          x: "", //x轴坐标
          y: "", //y轴坐标
          fused_angle: "", //角度
        },
        num: 0.5, //方大缩小的变量值
        robot: [], //记录库位点数据的变量
        seveRobot: [], // 点击保存后的数据
        newArry: [],
        newRobot:[], //删除后的新数组
        // parse:[],
      };
    },
  
    methods: {
      remove(index) {
        this.seveRobot.splice(index,1)
      },
  
      //编辑删除库位id
      async cancel(index) {
      this.newList.point_id.splice(index,1);
      },
  
    //进行修改库位时发送请求修改
      async achieve() {
        try{
           //发送请求
        let res = await changedApi({
          //传入你点击的那一项id
          point_list_id: this.newList.point_list_id,
          //传入删除后的数组
          point_id:  this.newList.point_id,
        });
        this.$toast.success('编辑成功')
        }catch{
            this.$toast.fail('编辑失败')
        }
      },
      //移动选中库位事件
      topDown(index) {
        if (index == 0) {
          this.$toast.fail("已经是第一项了");
          return;
        }
        //点击按钮向上移动一个位置
        this.seveRobot[index] = this.seveRobot.splice(
          index - 1,
          1,
          this.seveRobot[index]
        )[0];
        // this.seveRobot.pop(item)
      },
  
      //向下移动的按钮事件
      bottomDown(index) {
        if (index === this.seveRobot.length - 1) {
          this.$toast.fail("已经是最后一项");
          return;
        }
        //点击元素向下移动一位
        this.seveRobot[index] = this.seveRobot.splice(
          index + 1,
          1,
          this.seveRobot[index]
        )[0];
      },
  
    //选中这一项的向上按钮的事件
    ListDown(index){
         if (index == 0) {
          this.$toast.fail("已经是第一项了");
          return;
        }
        //点击按钮向上移动一个位置
        this.newList.point_id[index] = this.newList.point_id.splice(
          index - 1,
          1,
          this.newList.point_id[index]
        )[0];
    },
    // 选中的那一项想下的事件
    Listbotton(index){
        if (index === this.newList.point_id.length - 1) {
          this.$toast.fail("已经是最后一项");
          return;
        }
        //点击元素向下移动一位
        this.newList.point_id[index] = this.newList.point_id.splice(
          index + 1,
          1,
          this.newList.point_id[index]
        )[0];
    },
  
      // 获取列列表数据的方法
      // async getparse() {
      //   let res = await parseApi();
      //   //转换yaml格式数据
      //   let newres = yaml.load(res.data);
      //   //赋值给列列数组
      //   this.parse = newres;
      //   console.log(this.parse,'子组件');
      // },
      //点击保存后生成列列表
      async preserve() {
        //捕获错误
        try {
          //发送数据请求
          let res = await addparseApi({
            //传入你点击的那一项的id
            point_id: [...this.seveRobot],
          });
          // 调用父组件中的获取列列表数据的接口请求
          this.$parent.getparse();
          //提示用户新建成功
          this.$toast.success("保存成功");
          this.seveRobot = [];  //清空数据
          this.$emit('qingkong','')
        } catch {
          //   //提示用户保存失败
          this.$toast.fail("保存失败");
        }
  
        // console.log(res);
        //生成自定义事件修改show的值
        this.$emit("chdel", false);
      },
  
      //库位列表每一项的点击事件
      select(id) {
        if(this.show==true){
          this.seveRobot.push(JSON.parse(JSON.stringify(id)));
        }else{
          this.newList.point_id.push(JSON.parse(JSON.stringify(id)));
        }
  
      },
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      //获取库位列表的方法
      async getrecord() {
        //发送请求
        let res = await gainApi();
        let newres = yaml.load(res.data);
        // console.log(newres, "测试数据");
        if (res.data.msg !== "successed" && newres !== undefined) {
          //转换成对象键值对形式
          // 定义一个数组用来解构
          let one = [];
          //将转换好的对象追加到robot数组中
          one.push(newres);
          // 把最外层的数组给解构出来
          let flattened = [].concat.apply([], one);
          //赋值给robot数组
          this.robot = flattened;
          console.log(this.robot);
        }
      },
      //---------------------------------用来获取图片数据的方法
      gain() {
            let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器上的端口号
        //    let ws = new WebSocket("ws://192.168.20.101:10009");
        ws.onmessage = (e) => {
          //使用箭头函数改变this的指向
          //当服务器有消息，就会自动调用这个函数
          //e.data有服务器返回的数据
          const res = yaml.load(e.data); //使用yaml格式进行转换
          if (res.uri == "/sirius/topics/slam_grid_map") {
            //判断res中的uri路劲是不是等于有图片的路径
            this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
            this.width = res.info.width; //保存宽度
            this.height = res.info.height; //保存高度
            this.newx = res.info.origin.position.x;
            this.newy = res.info.origin.position.y;
          } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
            this.inif.x = res.fused_x; //保存获取到的x轴坐标
            this.inif.y = res.fused_y; //保存获取到的y轴坐标
            this.inif.fused_angle = res.fused_angle;
            // console.log(this.inif.x, this.inif.y, "坐标");
          }
        };
      },
      //右边移动
      right() {
        this.loctionleft += 30;
      },
      // 左边移动
      left() {
        this.loctionleft -= 30;
      },
      // 上面移动
      top() {
        this.loctiontop -= 30;
      },
      // 下面移动
      bottom() {
        this.loctiontop += 30;
      },
      //放大按钮事件
      big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },
    },
    created() {
      //发送请求获取地图信息
      this.gain();
      //调用方法获取库位点数据
      this.getrecord();
    },
  };
  </script>
  
  <style lang="less" scoped>
  .columnson {
    margin-top: 40px;
    .List {
      display: flex;
      .myimg {
        margin-left: 40px;
        position: relative;
        text-align: center;
        border: 2px solid black;
        overflow: hidden;
        width: 955px !important;
        height: 400px;
        display: flex;
        .right {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          position: absolute;
          top: 40%;
          right: 38%;
          color: #1ac1c1;
  
          z-index: 1000;
          border: none;
        }
        .left {
          position: absolute;
          top: 40%;
          left: -35px;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          color: #1ac1c1;
  
          border: none;
          z-index: 1000;
        }
        .top {
          position: absolute;
          top: -35px;
          right: 64%;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          color: #1ac1c1;
          z-index: 1000;
          border: none;
        }
        .bottom {
          position: absolute;
          bottom: -35px;
          right: 64%;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: transparent;
          color: #1ac1c1;
          z-index: 1000;
          border: none;
        }
        .mybig {
          position: fixed;
          bottom: 30px;
          right: 240px;
          .van-button {
            margin-left: 20px;
          }
        }
        #myone {
          ::v-deep .van-image__img {
          }
        }
      }
      .property {
        position: fixed;
        z-index: 3000;
        top: 100px;
        right: 0;
        height: 1000px;
        text-align: left;
        line-height: 45px;
        width: 220px;
        background-color: #12151a;
        .mybutton {
          text-align: center;
          .van-button {
            color: #fff;
            font-size: 22px;
            border-radius: 12px;
            width: 170px;
            background-color: #1a1c25;
            border: none !important;
            margin-top: 15px;
          }
        }
        .newList {
          text-align: center;
  
          .van-button {
            color: #fff;
            font-size: 22px;
            border-radius: 12px;
            width: 170px;
            background-color: #1a1c25;
            border: none !important;
            margin-top: 15px;
          }
        }
        .beiji {
          color: #5f5f61;
          height: 100%;
          background-color: #181a23;
        }
        .zore {
          font-size: 24px;
          color: white;
          margin-top: 50px;
          background-color: #212430;
          border-radius: 14px 14px 0 0;
          text-align: center;
        }
        .middle {
          color: #656666;
          font-size: 20px;
          text-indent: 1em;
        }
        .four {
          font-size: 20px;
          text-indent: 2em;
          .i {
            margin: 0 10px;
          }
        }
        .twofour {
          border: 2px solid black;
          text-indent: 1em;
          height: 240px;
          overflow-x: hidden;
          overflow-y: auto;
          div {
            font-size: 20px;
          }
          .twofour::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }
  }
  
  // 库位点样式
  #span {
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    width: 22px;
    height: 22px;
    position: absolute;
    background-color: #feed9d;
    border: 2px solid #cdc6a6;
    line-height: 22px;
    &.active {
      background-color: #46eefb;
      border: 2px solid #78b6fa;
    }
  }
  
  .seat {
    display: flex;
    // position: relative;
    .button {
      display: flex;
      text-align: center;
      ::v-deep .van-icon:before {
        display: inline-block;
        // background-color: skyblue;
        margin-top: 10px;
        width: 30px !important;
        // background-color: #161920;
        // border: 1px solid #1983ed;
      }
    }
  }
  </style>
  